<template>
    <div class="bigbox">
        <div class="leftbox">
            <span>房间列表</span>
            <el-input  style="width: 130px" placeholder="房间名称" class="left_input"/>
            <el-tree 
                style="max-width: 300px ;"
                
                :data="treeData" 
                :props="defaultProps" 
                @node-click="handleNodeClick" >
                <template #default="{ node}">
                    <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    
                    </span>
                </template>
            </el-tree>
        </div>
        <div class="rightbox">
            <ETable :delelteAll="delBedAll" :delelte="delBed" :isSearch="false" :columns="columns"  :loadData="getBed"  :isPage="true" :pageSize="[10,20,30]" ref="table" >
                <template #buttons="{delAll}">
                    <el-button type="success">添加床位</el-button>
                    <el-button type="danger" @click="delAll">批量删除 </el-button>
                </template>

                <template #operation="{row,del}">

                    <el-button type="primary">编辑</el-button>
                    <el-button type="danger" @click="del(row.id)">删除 </el-button>
                    <!-- <el-button type="danger" @click="del(row.id)">删除</el-button> -->
                </template>
                
                <template #photo="{row}">

                <el-image
                style="width: 50px; height: 50px"
                :src="imgUrl+row.photo"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[imgUrl+row.photo]"
                :initial-index="4"
                fit="cover"
                preview-teleported
                />
                </template>

                </ETable>
        </div>
    </div>
</template>

<script setup lang="ts">
  import  {  getBed ,delBed,delBedAll} from '../../apis//bed/bed';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref} from 'vue';
  import { buildTree } from '../../utils/treeUtil';

  import {getCompanys} from '../../apis/Building/Building';
  

  const imgUrl =import.meta.env.VITE_IMG_URL;

  


  const columns= reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '110',
  },
  {
    prop: 'name',
    label: '床位号',
    width: '110',
  },
  {
    prop: 'price',
    label: '价格',
    width: '110',
  },
  {
    prop: 'addAccountName',
    label: '创建人',
    width: '110',
  },
  {
    prop: 'addTime',
    label: '创建时间',
    width: '200',
  },
  {
    prop: 'state',
    label: '状态',
    width: '200',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
  ])


  interface Tree {
    id: number;
    label: string;
    name?: string;
    children?: Tree[];
  }
  
  const handleNodeClick = (data: Tree) => {
    console.log(data)
  }
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  const total = ref(0)
  const params = reactive<any>({
    page: 1,
    pageSize: 1000,
  });
  const tableData = ref<any>([]);
  const treeData = ref<Tree[]>([])
  
  const getData = async () => {
    const res: any = await getCompanys(params);
    console.log(res);
    
  
    tableData.value = res.list;
    total.value = res.counts
  
    treeData.value = buildTree(res.list)
  
    console.log("子组件调用", res.list);
  
    treeData.value.map(item => {
      item.label = item.name || ''; // 如果 item.name 是 undefined，则使用空字符串作为默认值
      if (item.children) {
        item.children.map(child => {
          child.label = child.name || ''; // 同理处理子节点
          if (child.children) {
            child.children.map(grandChild => {
              grandChild.label = grandChild.name || ''; // 处理孙子节点
            });
          }
        });
      }
    })
  }
  
  getData()
</script>

<style scoped>
.left_input{
    margin-top: 20px;
    margin-bottom: 20px;
}
.bigbox{
    background-color: #fff;
}
.rightbox{
width: 80%;

float: left;
}
.leftbox{
width: 150px;
background-color: #fff;
padding: 20px;
float: left;
}
</style>